<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'角色选择', styles:'bootstrap,font-awesome,animate,style,bootstrap-table'}){}%>
</head>

<body>

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">

            <!-- START 右侧数据 -->
            <!-- START 操作按钮 -->
            <div id="toolbar" class="btn-group" style="margin-bottom:5px;">
                <button type="button" class="bind-btn btn btn-sm btn-success"><i class="fa fa-check" aria-hidden="true"></i> 确认</button>
            </div>
            <!-- END 操作按钮 -->

            <!-- START 数据表格 -->
            <table id="powerroletable"
                   data-toolbar="#toolbar"
                   data-side-pagination="server"
                   data-pagination="true"
                   data-resizable="true"
                   data-side-pagination="server"
                   data-url="${ctxPath}/power/role/findall.do"
                   data-page-size="100">
            </table>
            <!-- END 数据表格 -->

            <!-- END 右侧数据 -->
        </div>
    </div>
</div>

<%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,bootstrap-table-zh-CN,layer'}){}%>

<script>
    var $powerroletable = $('#powerroletable'),selections=[];
    var bindedroles = [<%for(role in bindroles){print(role.id);if(!roleLP.last){print(",");}}%>];

    $(function(){

        //START 表格配置
        $powerroletable.bootstrapTable({
            height: getHeight(),
            columns: [
                {
                    field: 'state',
                    checkbox: true,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '编号',
                    field: 'id',
                    align: 'left',
                    valign: 'middle',
                    visible: false,
                    sortable: true
                },
                {
                    title: '角色名称',
                    field: 'roleName',
                    align: 'left',
                    valign: 'middle',
                    sortable: true
                },
                {
                    title: '角色描述',
                    field: 'roleDesc',
                    align: 'left',
                    valign: 'middle'
                },
                {
                    title: '状态',
                    field: 'enabled',
                    align: 'left',
                    width: 50,
                    valign: 'middle',
                    sortable: true,
                    formatter: function(v,r){
                        switch (v) {
                            case 0:
                                v = '已禁用';
                                break;
                            case 1:
                                v = '已启用';
                                break;
                            default:
                                v = '未知';
                                break;
                        }
                        return v;
                    },
                },
                {
                    field: 'operate',
                    title: '操作',
                    width: 200,
                    align: 'center',
                    valign: 'middle',
                    formatter: optFormatter
                }
            ],
            onLoadSuccess : function(){
                $powerroletable.bootstrapTable("checkBy", {field:"id", values:[<%for(role in bindroles){print(role.id);if(!roleLP.last){print(",");}}%>]});
            }
        });
        //END 表格配置


        //保存绑定角色信息
        $('.bind-btn').on('click',function(){
            var selDatas = $powerroletable.bootstrapTable('getSelections');

            var selectedroleids = [];
            $.each(selDatas,function(i,d){
                selectedroleids.push(d.id);
            });
            //绑定用户与角色关系
            $.post('${ctxPath}/power/role/savereluserrole.do',{rids:selectedroleids.join(','),uid:${userid}},function(data){
                if( data.ok ){
                    parent.layer.msg(data.msg,{icon:1,time:1500,shade: [0.8, '#393D49']}, function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭弹窗
                    });
                }else{
                    parent.layer.msg(data.msg,{icon: 0,time:1500,shade: [0.8, '#393D49']});
                }
            });

        });

        //表格高度自适应
        $(window).resize(function () {
            $powerroletable.bootstrapTable('resetView', {
                height: getHeight()
            });
        });
    });

    //操作菜单
    function optFormatter(value,row){
        //var content = '<button class="edit-powerrole-btn btn btn-xs btn-info" data-val="'+row.id+'" title="编辑"><i class="fa fa-edit"></i>  </button>';
        //content += '&nbsp;<button class="del-powerrole-btn btn btn-xs btn-danger" data-val="'+row.id+'" title="删除"><i class="fa fa-trash-o"></i>  </button>';
        return value;//content;
    }

    //表格高度计算
    function getHeight() {
        return $(window).height() - $('.btn-group').outerHeight(true) - $('.breadcrumb').outerHeight(true) - 10;
    }
</script>
</body>
</html>
